<template>
    <el-dialog :model-value="dialogVisible" :title="dialogTitle" width="35%" @close="handleClose">
        <!-- 表单开始 -->
        <el-form ref="formRef" :model="form" label-width="120px" :rules="rules">
            <!-- 影厅名字 -->
            <el-form-item label="影厅名字" prop="name">
                <el-input v-model="form.roomName" />
            </el-form-item>
            <!-- 影厅排数 -->
            <el-form-item label="影厅排数" prop="row">
                <el-input v-model="form.roomRow" />
            </el-form-item>
            <!-- 影厅列数 -->
            <el-form-item label="影厅列数" prop="col">
                <el-input v-model="form.roomCol" />
            </el-form-item>
            <!-- 影厅楼层 -->
            <el-form-item label="影厅楼层" prop="floor">
                <el-input v-model="form.roomFloor" />
            </el-form-item>
            <!-- 影厅容纳人数 -->
            <el-form-item label="影厅容纳人数" prop="contain">
                <el-input :value="isNaN(form.roomCol * form.roomRow) ? '' : form.roomCol * form.roomRow" disabled />
            </el-form-item>
            <!-- 影厅类型 -->
            <el-form-item label="影厅类型" prop="type">
                <el-select v-model="form.roomType" class="m-2" placeholder="请定义影厅类型">
                    <el-option v-for="item in types" :key="item.value" :label="item.lable" :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
        <!-- 操作栏 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps, watch, computed } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { addARoom, updateARoom } from '../../../../../api/room';

const formRef = ref<FormInstance>()

interface IRoom {
    unitId: number,
    roomId: number,
    roomName: string,
    roomRow: number,
    roomCol: number,
    roomType: number,
    roomFloor: number,
    roomContain: number,
    roomOpen: boolean | number,
}

let types = [
    {
        lable: '小',
        value: 1
    },
    {
        lable: '中',
        value: 2
    },
    {
        lable: '大',
        value: 3
    }
]

let form = reactive<IRoom>({
    unitId: 0,
    roomId: 0,
    roomName: '',
    roomRow: 0,
    roomCol: 0,
    roomType: 0,
    roomFloor: 0,
    roomContain: 0,
    roomOpen: true
})

const rules = reactive({
    roomName: [
        { required: true, message: '请输入影厅名称', trigger: 'blur' },
    ],
    roomRow: [
        { required: true, message: '请输入排数', trigger: 'blur' },
    ],
    roomCol: [
        { required: true, message: '请输入列数', trigger: 'blur' },
    ],
    roomFloor: [
        { required: true, message: '请输入楼层', trigger: 'blur' },
    ],
    roomType: [
        { required: true, message: '请输入类型', trigger: 'blur' },
    ],
})

let dialogVisible = ref(false)

let dialogTitle = ref('新增影厅')

const props = defineProps({
    dialogTitle: {
        type: String,
        default: '',
        required: true
    },
    dialogTableValue: {
        type: Object,
        default: () => { }
    }
})

const emits = defineEmits(['initRoom', 'update:modelValue','initWaitList'])

const handleClose = () => {
    emits('update:modelValue', false)
}

const handleConfirm = () => {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            form.unitId = JSON.parse(window.sessionStorage.getItem("currentUser")!).unitId
            props.dialogTitle === '新增影厅' ? form.roomOpen = 1 : form.roomOpen = 0
            if (props.dialogTitle === '新增影厅') {
                await addARoom(form).then((res: any) => {
                    if (res.code == 200) {
                        ElMessage({
                            message: '创建成功',
                            type: 'success',
                        })
                        
                    } else {
                        ElMessage({
                            message: '创建失败',
                            type: 'error',
                        })
                    }
                })
                emits('initRoom')
            } else {
                await updateARoom(form).then((res: any) => {
                    if (res.code == 200) {
                        ElMessage({
                            message: '更新成功',
                            type: 'success',
                        })
                        
                    } else {
                        ElMessage({
                            message: '更新失败',
                            type: 'error',
                        })
                    }
                })
                emits('initWaitList',form)
            }
            handleClose()
        } else {
            console.log('error submit!!')
            return false
        }
    })
}

watch(() => props.dialogTableValue, () => {
    (form as object) = props.dialogTableValue
    // console.log(props.dialogTableValue);
    dialogTitle.value = props.dialogTitle
}, { deep: true, immediate: true })
</script>
<style lang='scss' scoped>

</style>
